<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0 auto;
        padding: 0;
    }

    #msg1,
    #msg2,
    #msg3 {
        display: block;
        position: relative;
        background-color: pink;
        width: 400px;
        height: 140px;
        margin-bottom: 2px;
    }

    button {
        position: absolute;
        right: 0;
        top: 0;
        width: 20px;
        height: 20px;
        border: 1px solid pink;
        background-color: pink;
        font-weight: 700;
    }
</style>

<body>
	<!-- 1. 使用委托隐藏消息。
	有一个带有移除按钮`[x]`的消息列表。让按钮可以工作。（即点击按钮，就将对应的消息删除） -->
    <div id="msg1">
        <h3>A</h3>
        <button>[x]</button>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum provident, sit doloremque recusandae debitis
        cupiditate consequatur maiores repellat ex libero illo, omnis aut adipisci fugit reprehenderit neque dolorum
        quaerat? Asperiores!
    </div>
    <div id="msg2">
        <h3>B</h3>
        <button>[x]</button>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio debitis hic eaque facere placeat quisquam eum
        dolores quasi aliquam nostrum officia velit quo, voluptatibus quae veniam! Quo eveniet vitae veritatis.
    </div>
    <div id="msg3">
        <h3>C</h3>
        <button>[x]</button>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque ea saepe velit assumenda excepturi deleniti
        voluptatem praesentium, sapiente harum nulla, quo iste repudiandae in. Explicabo, illum ad! Aliquam, magni vel!
    </div>
    <script>
        var body = document.querySelector('body');
        //将onclick事件委托到body上面
        body.onclick = function (event) {
            //在body.onclick中处理程序中，获取点击的事件
            var target = event.target;
            console.log(target);
            //`closest()`方法检索祖先元素时，也会检索自己
            var btn = target.closest('button');
            console.log(btn);
            var div = btn.closest('div');
            console.log(div);
            div.style.display = 'none';
        }
    </script>
</body>

</html>
